<template>
  <div class="container">
    <!-- 饼图 -->
    <div class="chart-container">
      <v-chart class="chart" :option="pieChartOption" />
    </div>

    <!-- 折线图 -->
    <div class="chart-container">
      <v-chart class="chart" :option="lineChartOption" />
    </div>
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, LineChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
]);

export default {
  name: "ChartsComponent",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "light",
  },
  data() {
    return {
      pieChartOption: {
        title: {
          text: "萌宠简坛数据饼图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "用户",
            "角色",
            "帖子",
            "帖子收藏",
            "帖子喜欢",
            "宠物百科",
            "帖子举报",
          ],
        },
        series: [
          {
            name: "记录数",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      lineChartOption: {
        title: {
          text: "萌宠简坛数据折线图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["记录数"],
          left: "left",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "用户",
            "角色",
            "帖子",
            "帖子收藏",
            "帖子喜欢",
            "宠物百科",
            "帖子举报",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "记录数",
            type: "line",
            data: [],
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.updatePieChart();
      this.updateLineChart();
    },
    updatePieChart() {
      this.pieChartOption.series[0].data = [
        { value: 12, name: "用户" },
        { value: 4, name: "角色" },
        { value: 56, name: "帖子" },
        { value: 78, name: "帖子收藏" },
        { value: 153, name: "帖子喜欢" },
        { value: 60, name: "宠物百科" },
        { value: 10, name: "帖子举报" },
      ];
    },
    updateLineChart() {
      this.lineChartOption.series[0].data = [
        12,
        4,
        56,
        78,
        153,
        60,
        10,
      ];
    },
  },
};
</script>

<style scoped>
.container {
  display: flex; /* 使用 Flexbox 将容器的子元素横向排列 */
  justify-content: space-between; /* 将子元素平均分布在父容器中 */
}

.chart-container {
  flex: 1; /* 让每个图表容器平均占据可用空间 */
  box-sizing: border-box; /* 让容器的宽度包括内边距和边框 */
  padding: 10px; /* 添加一些内边距 */
}

.chart {
  width: 100%;
  height: 500px;
}
</style>
